
<template>
	<!-- 确认订单页面 -->
	<view class="content">
		<view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()"></image>
					确认订单
				<view  class="loa_hui"></view>
			</view>
		</view>
		</view>
		
		<!-- 有地址显示 -->
		<view class="top" v-if="cunaddress">
			<navigator class="top_box" url="../member/address" hover-class="none">
				<image class="top_box_left" mode="widthFix" src="../../static/mem11.png"></image>
				<view class="top_box_cen">
					<view class="top_box_cen_tp">
						<view class="name">收货人：张新超</view>
						<view class="tel" style="margin-left:30rpx;">13925509476</view>
					</view>
					<view class="top_box_cen_bt">
						广东省东莞市南城 广东省东莞市南城区豪岗和塘四巷1号二楼(永家公寓，不在家时，请到二楼房东签收)
					</view>
				</view>
				<image class="top_box_left" mode="widthFix" src="../../static/rightimg.png"></image>
			</navigator>
			<view class="top_bt"></view>
		</view>
		
		<!-- 无地址显示 -->
		<view class="top" v-else>
			<navigator class="top_box" url="../member/address" hover-class="none" style="padding:40rpx 0;">
				<image class="top_box_left" mode="widthFix" src="../../static/mem11.png"></image>
				<view class="top_box_cen">
					<view class="top_box_cen_tp" style="text-align: center;font-weight: 500;font-size:28rpx;
    width: 100%;display: inline-block;">
						+添加收货地址
					</view>
				</view>
				<image class="top_box_left" mode="widthFix" src="../../static/rightimg.png"></image>
			</navigator>
			<view class="top_bt"></view>
		</view>
		
		<view class="shop_box">
			<view class="item_ul">
						<view class="item_li" v-for="(shop,index) in shop" :key="index">
							<view class="addbgli">
							<view class="item_li_left">
								<image :src="shop.src" mode="widthFix"></image>
							</view>
							<view class="item_li_right" hover-class="none" url="../goods/detail">
								<navigator class="item_li_right_tp" hover-class="none" url="../goods/detail">
									{{shop.title}}
								</navigator>
								<view class="item_li_right_bt">
									<view class="item_li_right_bt_left">
									<view class="newmoney">￥{{shop.newmoney}}</view>
									<view class="oldmoney">￥{{shop.oldmoney}}</view>
									<view style="margin-left:25rpx;color:#666;">{{shop.gui}}</view> 
									</view>
									<view class="item_li_right_bt_right">
										<view class="num_box">
											<view class="num_box_left" @tap="jian(index)">-</view>
											<input type="number" class="num_input" :value="shop.value"/>
											<view class="num_box_right" @tap="jia(index)">+</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					</view>
					<view class="shop_zong">
						共<view style="color: #ff80c0;font-size:30rpx;font-weight: 500;margin:0 3rpx;">2</view> 件商品 
						共计：<view style="color: #ff80c0;font-size:30rpx;font-weight: 500;">¥77.40</view>
					</view>
		</view>

		<view class="maiyan">
			<view class="maiyan_box">
				<view class="maiyan_box_left">买家留言</view>
				<view class="maiyan_box_right">
					<textarea placeholder="50字以内（选填）" class="area"></textarea>
				</view>
			</view>
		</view>
		
		<view class="maiyan" style="margin-top:20rpx;">
		<view class="label label2">
			<view class="label_left" style="white-space: nowrap;">
				潮人豆可抵扣 <view style="color: #ff80c0;font-size:30rpx;font-weight: 500;">¥3.40</view>元
			</view>
			<view class="label_right">
				<switch @change="switch2Change" color="#ff80c0"/>
			</view>
		</view>
		</view>
		
		<view class="maiyan" style="margin-top:20rpx;">
		<view class="label label2" style="padding-bottom:20rpx;">
			<view class="label_left" style="white-space: nowrap;">
				商品小计 
			</view>
			<view class="label_right">
				¥25.8
			</view>
		</view>
		<view class="label label2" style="border-top:2rpx solid #ededed;padding-top:20rpx;">
			<view class="label_left">
				运费
			</view>
			<view class="label_right">
				¥0.00
			</view>
		</view>
		</view>
		<view style="height:100rpx;">
		<view class="jie_box">
			需付： <view style="color: #ff80c0;font-size:30rpx;font-weight: 500;">¥33.40</view>
			<view class="play_btn" @tap="loaplay">立即支付</view>
		</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				cunaddress:true, //判断是否存在地址
				shop:[  //商品合集
					{
					src:'http://wx.crh2009.com/attachment/images/2/2020/08/jAH06Q4F2FUHkq2Xja4HRkR143x1d0.jpg',
					title:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏',
					newmoney:22.80,
					oldmoney:39.00,
					value:3,  //商品的数量，计算价格
					gui:'2盒',
					},
					{
					src:'http://wx.crh2009.com/attachment/images/2/2020/08/jAH06Q4F2FUHkq2Xja4HRkR143x1d0.jpg',
					title:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏',
					newmoney:22.80,
					oldmoney:39.00,
					value:2,  //商品的数量，计算价格
					gui:'2盒',
					},
				],
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			jian (index){  //数量减，价格变
				const newvalue=this.shop[index].value-1;
				if(newvalue<=0){
					newvalue=0;
				};
				this.shop[index].value=newvalue; //改变框中value值
				const danjia=newvalue*this.shop[index].newmoney;
				console.log(danjia);
			},
			jia (index){  //数量加，价格变
				const newvalue=this.shop[index].value+1;
				this.shop[index].value=newvalue;
				console.log(newvalue*this.shop[index].newmoney);
			},
			switch2Change: function (e) {
			           console.log('switch2 发生 change 事件，携带值为', e.target.value)
			       },
				   loaplay (){  //确定所有参数去支付
					 uni.navigateTo({
					 	url:'../mobile/play'
					 })  
				   },
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.top{
		width:100%;
		padding:35rpx 0;
		background-color: #fff;
		margin-top:-10rpx;
		position: relative;
	}
	.top_box{
		width:95%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 auto;
	}
	.top_box_left{
		width:35rpx;
	}
	.top_box_cen{
		width:85%;
	}
	.top_box_cen_tp{
		display: flex;
		align-items: center;
	}
	.name,.tel{
		font-size:28rpx;
	}
	.top_box_cen_bt{
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    font-size: 24rpx;
		    color: #666;
			margin-top:10rpx;
	}
	.top_bt{
		width:100%;
		background:url(../../static/order_line.png) repeat-x;
		height:8rpx;
		position: absolute;
		bottom:0;
	}
	.shop_box{
		padding:15rpx 0;
		margin:25rpx 0;
		background-color: #fff;
	}
	.item_ul{
		width:100%;
	}
	.item_li{
		width:100%;
		background-color: #fff;
		border-bottom:2rpx solid #ededed;
	}
	.addbgli{
		width:93%;
		margin:0 auto;
		padding:30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item_li:nth-child(1){
		margin-top:0;
	}

	.item_li_left{
		width:25%;
		display: flex;
		justify-content: flex-start;
		align-items: center
	}
	.item_li_left image{
		width:100%;
	}
	.item_li_right{
		width:70%;
	}
	.item_li_right_tp{
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    white-space: normal;
			font-size:27rpx;
	}
	.item_li_right_bt{
		margin-top:25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item_li_right_bt_left{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.item_li_right_bt_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.newmoney{
		color: #ff80c0;
		margin-right:15rpx;
		font-size:30rpx;
		font-weight: 500;
	}
	.oldmoney{
		font-size:25rpx;
		text-decoration: line-through;
		color:#666;
	}
	uni-checkbox:not([disabled]) .uni-checkbox-input:hover{
		border-color:rgb(255, 128, 192);
	}
	.num_box{
		width:150rpx;
		height:50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border: 2rpx solid #d9d9d9;
	}
	.num_box_left,.num_box_right{
		width:30%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.num_box_left{
		border-right:2rpx solid #d9d9d9;
	}
	.num_box_right{
		border-left:2rpx solid #d9d9d9;
	}
	.num_input{
		text-align: center;
		width:40%;
	}
	.shop_zong{
		width:90%;
		margin:0 auto;
		justify-content: flex-end;
		padding:20rpx 0;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}
	.maiyan{
		background-color: #fff;
		padding:25rpx 0;
	}
	.maiyan_box{
		width:93%;
		margin:0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.maiyan_box_left{
		color:#666;
		font-size:28rpx;
		width:22%;
		/* white-space: nowrap; */
	}
	.maiyan_box_right{
		width:75%;
	}
	.area{
		width:100%;
		max-height:38rpx;
		overflow-x: auto;
	}
	.label{
		width:93%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 auto;
	}
	.label_left{
		display: flex;
		justify-content:flex-start;
		align-items: center;
		color:#666;
		font-size:26rpx;
	}
	.label_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.label2 .label_left{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.smstart{
		color:red;
		font-size:30rpx;
	}
	.label2 .label_right{
		width:80%;
	}
	.input_as{
		display: inline-block;
		width:100%;
		color:#000;
		text-indent: 20rpx;
	}
	.label2_right_sm{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color:#666;
	}
	.uni-input-input{
		font-size: 30rpx!important;
	}
	.jie_box{
		width:100%;
		height:95rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: fixed;
		bottom:0;
		z-index: 999;
	}
	.play_btn{
		width:30%;
		height:100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #ff80c0;
		color:#fff;
		font-size: 30rpx;
		margin-left:30rpx;
	}
</style>

